import { Text } from "@chakra-ui/react";
import { ReactNode } from "react";

const TextTag = ({isActive,children,onClick}:{isActive:boolean,children?:ReactNode,onClick:() => void}) => {
    return (
        <Text fontSize="16px" 
            color={isActive ? "black" : "gray.500"} 
            cursor="pointer"
            fontWeight={isActive ? "bold" : "thin"}
            _hover={isActive ? {color:"black"} : {color:"gray.600"}}
            onClick={onClick}
            position="relative"
            mr={6}
            _after={{
                content: '""',
                position: 'absolute',
                left: 0,
                bottom: '2px',
                width: '100%',
                height: '6px',
                zIndex: -1,
                backgroundColor: 'yellow.300',
                display: isActive ? 'block' : 'none'
            }}
        >
            {children}
        </Text>
    )
}

export default TextTag;